<template>
  <div class="wrap wrap-sku">
    <div class="product-box">
      <div class="product-content">
        <div
          class="product-delcom"
          v-for="(item, n) in simulatedDATA.specifications"
          :key="item.id"
        >
          <p>{{ item.name }}</p>
          <ul class="product-footerlist clearfix">
            <li
              v-for="(items, index) in item.item"
              :key="items.id"
              @click="specificationBtn(items.name, n, $event, index)"
              :class="[
                items.isShow ? '' : 'noneActive',
                subIndex[n] == index ? 'productActive' : '']"
            >
              {{ items.name }}
            </li>
          </ul>
        </div>
        <p v-if="price" class="price">¥{{ price }}</p>
      </div>
      <div class="product-footer">
        <a href="javascript:">立即购买</a>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      simulatedDATA: {
        //模拟后台返回的数据 多规格
        difference: [
          {
            //所有的规格可能情况都在这个数组里
            id: "19",
            price: "200.00",
            stock: "19",
            difference: "100,白色"
          },
          {
            id: "20",
            price: "100.00",
            stock: "29",
            difference: "200,白色"
          },
          {
            id: "21",
            price: "300.00",
            stock: "10",
            difference: "100,黑色"
          },
          {
            id: "22",
            price: "900.00",
            stock: "0",
            difference: "200,黑色"
          },
          {
            id: "23",
            price: "600.00",
            stock: "48",
            difference: "100,绿色"
          },
          {
            id: "24",
            price: "500.00",
            stock: "40",
            difference: "200,绿色"
          },
          {
            id: "25",
            price: "90.00",
            stock: "0",
            difference: "100,蓝色"
          },
          {
            id: "26",
            price: "40.00",
            stock: "20",
            difference: "200,蓝色"
          }
        ],
        specifications: [
          {
            //这里是要被渲染字段
            name: "尺寸",
            item: [
              {
                name: "100"
              },
              {
                name: "200"
              }
            ]
          },
          {
            name: "颜色",
            item: [
              {
                name: "白色"
              },
              {
                name: "蓝色"
              },
              {
                name: "黑色"
              },
              {
                name: "绿色"
              }
            ]
          }
        ]
      },
      selectArr: [], //存放被选中的值
      shopItemInfo: {}, //存放要和选中的值进行匹配的数据
      subIndex: [], //是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断
      price: "" //选中规格的价钱
    };
  },
  created() {
    var self = this;
    for (var i in self.simulatedDATA.difference) {
      self.shopItemInfo[self.simulatedDATA.difference[i].difference] =
        self.simulatedDATA.difference[i]; //修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
    }
    self.checkItem();
  },
  methods: {
    specificationBtn: function(item, n, event, index) {
      console.log(item);
      console.log(n);
      console.log(event);
      console.log(index);
      var self = this;
      if (self.selectArr[n] != item) {
        self.selectArr[n] = item;
        self.subIndex[n] = index;
      } else {
        self.selectArr[n] = "";
        self.subIndex[n] = -1; //去掉选中的颜色
      }
      self.checkItem();
    },
    checkItem: function() {
      var self = this;
      var option = self.simulatedDATA.specifications;
      var result = []; //定义数组储存被选中的值
      for (var i in option) {
        result[i] = self.selectArr[i] ? self.selectArr[i] : "";
        var last = result[i]; //把选中的值存放到字符串last去
        for (var k in option[i].item) {
          result[i] = option[i].item[k].name; //赋值，存在直接覆盖，不存在往里面添加name值
          option[i].item[k].isShow = self.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
        }
        result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时被覆盖
      }
      if (this.shopItemInfo[result]) {
        this.price = this.shopItemInfo[result].price || "";
      }
      self.$forceUpdate(); //重绘
    },
    isMay: function(result) {
      for (var i in result) {
        if (result[i] == "") {
          return true; //如果数组里有为空的值，那直接返回true
        }
      }
    //   return this.shopItemInfo[result].stock == 0 ? false : true; //匹配选中的数据的库存，若不为空返回true反之返回false
    }
  }
};
</script>
<style>
.product-box {
  width: 100%;
  display: block;
  margin: 0 auto;
}
.product-content {
  margin-bottom: 70px;
  float: left;
  width: 100%;
}
.product-delcom {
  color: #323232;
  font-size: 15px;
  border-bottom: 1px solid #eeeeee;
  padding: 20px 0;
  float: left;
  width: 100%;
  padding-bottom: 10px;
}
.product-delcom p {
  float: left;
  width: 88%;
  text-align: left;
  margin-left: 6%;
}
.product-footerlist {
  margin-top: 10px;
  float: left;
  margin-left: 6%;
}
.product-footerlist li {
  border: 1px solid #606060;
  border-radius: 5px;
  color: #606060;
  text-align: center;
  padding: 4px 12px;
  float: left;
  margin-right: 20px;
  cursor: pointer;
  list-style: none;
  margin-bottom: 10px;
}
.product-footerlist li.productActive {
  background-color: #1a1a29;
  color: #fff;
  border: 1px solid #1a1a29;
}
/* .product-footerlist li.noneActive { */
  /* background-color: #ccc;
  opacity: 0.4;
  color: #000;
  pointer-events: none; */
/* } */
.product-footer {
  background-color: #1a1a29;
  text-align: center;
  float: left;
  width: 80%;
  margin-left: 10%;
}
.product-footer a {
  color: #fff;
  text-decoration: none;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
}
.price {
  font-size: 15px;
  height: 40px;
  line-height: 40px;
  float: left;
  width: 88%;
  text-align: left;
  margin-left: 6%;
}
</style>